<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">
            <!--搜索条件-->
            <el-row>
                <el-col :span="13">

                    <div class="dlblock-mb20 ml10">
                        <span class="pr5" style="padding-left: 30px">机构名称</span>
                        <el-cascader
                                v-model="param.groupId"
                                :options="groupTree"
                                :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                                style="width: 150px;"
                                :show-all-levels="false"
                                clearable>
                        </el-cascader>
                    </div>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">部门</span>
                        <el-select v-model="param.deptId" style="width: 150px" clearable>
                            <!--                            <el-option :label="item.name" v-for="item in dutuies" :value="item.name"></el-option>-->
                            <el-option v-for="(item, index) in departments" :key="index" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">职务</span>
                        <el-select v-model="param.dutieId" style="width: 150px" clearable>
                            <el-option v-for="(item, index) in dutuies" :key="index" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">姓名</span>
                        <el-input v-model.trim="param.name" class="input-text" size="medium"
                                  @keydown.enter.native="getEmployeesFn"
                                  placeholder="请输入姓名" style="width: 150px;"
                                  :maxlength="10"
                                  show-word-limit clearable>
                        </el-input>
                    </div>
                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button
                                @click="param.page = 1,getEmployeesFn()"
                                class="el-icon-search ml5"
                                circle
                        ></el-button>
                    </div>
                </el-col>
                <el-col :span="11" align="right">
                    <div class="grid-content bg-purple-light">
                        <div class="dlblock-mb20 pr10 ml20">
                            <el-button type="primary" @click="addEmployeeFn">添加</el-button>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-button type="danger" @click="delPersonsFn">删除</el-button>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-button type="primary" @click="downloadBtn()">下载模板</el-button>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-upload
                                    class="text-right"
                                    name="file"
                                    ref="upload"
                                    :action="config.baseURL + '/api/web/employee/import/person'"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :auto-upload="false">
                                <el-button slot="trigger" size="medium" type="primary">模板导入</el-button>
                                <el-button style="margin-left: 10px;" size="medium" type="success"
                                           @click="submitUpload">确定导入
                                </el-button>
                            </el-upload>
                        </div>
                        <div class="dlblock-mb20 pl10">
                            <el-button @click="downloadEmpFn" >
                                导出列表
                            </el-button>
                        </div>


                    </div>
                </el-col>
            </el-row>
            <!--表格-->
            <el-row>
                <el-table class="my-table"
                          :data="personList" stripe
                          v-loading="loading"
                          :header-row-class-name="'my-table-header'"
                          @selection-change="handleSelectionChange"
                          ref="myTable"
                          border>
                    <el-table-column type="selection" align="center" fixed width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column align="center" prop="cardNo" label="员工工号"></el-table-column>
                    <el-table-column align="center" prop="gender" label="性 别">
                        <template slot-scope="{row}">
                            <p>{{row.gender !=null?row.gender==1?"男":row.gender==2?"女":"--":""}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="groupName" label="机 构"></el-table-column>
                    <el-table-column align="center" prop="deptName" label="部 门"></el-table-column>

                    <el-table-column align="center" prop="dutyName" label="职 务">
                        <template slot-scope="{row}">
                            <p v-if="row.dutyName == null || row.dutyName == ''">未设置
                            </p>
                            <p v-else>{{row.dutyName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="phone" label="手机号" width="150">
                        <template slot-scope="{row}">
                            <p v-if="row.phone == null || row.phone == ''">--
                            </p>
                            <p v-else>{{row.phone}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="nativeName" label="籍 贯">
                        <template slot-scope="{row}">
                            <p v-if="row.nativeName == null || row.nativeName == ''">--
                            </p>
                            <p v-else>{{row.nativeName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="nation" label="民 族">
                        <template slot-scope="{row}">
                            <p>{{nations.find(item => {return item.value == row.nation}).name}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="eduName" label="学 历">
                        <template slot-scope="{row}">
                            <p v-if="row.eduName == null || row.eduName == ''">--
                            </p>
                            <p v-else>{{row.eduName}}</p>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="dateOfWork" label="从业日期">
                        <template slot-scope="{row}">
                            <p>{{row.dateOfWork!=null?new Date().getFullYear()
                                -parseInt(row.dateOfWork.slice(0,4)):0}}年</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="通讯地址" width="150">
                        <template slot-scope="{row}">
                            <p v-if="row.address == null || row.address == ''">--
                            </p>
                            <p v-else>{{row.address}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" fixed="right" width="150">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="updateEmployeeFn(row)">编辑</el-button>
                            <el-button type="text" style="color: #f56c6c" @click="delPersonFn(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!--分页控件-->
            <el-row :gutter="20" class="mt10">
                <el-col :span="12" :offset="6" align="center">
                    <el-pagination background layout="total, prev, pager, next" :total="query.total"
                                   :page-size="query.pageSize"
                                   :current-page="query.pageNum" @current-change="pageChange">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <el-dialog :title="`人员编辑`" :visible.sync="employee" width="1050px" :close-on-click-modal="false" v-dialogDrag>

            <el-row :gutter="10" style="padding: 0px 0px 0px 0px !important;">
                <el-form label-position="left" label-width="110px" :model="person"
                         ref="person" style="padding: 0px 0px 0px 0px !important;">
                    <el-row class="mt20">

                        <el-row id="basic">
                            <el-col :span="6" class="ml20">
                                <h1>基础信息</h1>
                            </el-col>
                        </el-row>

                        <el-form :model="person" class="mt30" label-width="145px" ref="baseform">
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="所属机构" prop="group">
                                        <el-cascader
                                                v-model="person.groupId"
                                                :options="groupTree"
                                                :props="{value: 'orgId', label: 'orgName', checkStrictly: true,expandTrigger:'hover'}"
                                                style="width: 230px;"
                                                :show-all-levels="false"
                                                clearable
                                                placeholder="请选择">
                                        </el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="人员类型：" prop="type" :rules="required">
                                        <el-select v-model="person.emplyeeType" clearable class="size-full"
                                                   style="width: 230px;">
                                            <el-option label="未设置" :value="0"></el-option>
                                            <el-option label="常规人员" :value="1"></el-option>
                                            <el-option label="驾驶员" :value="2"></el-option>
                                            <el-option label="加盟人员" :value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2" align="left">
                                    <el-form-item label="姓名:" prop="name" :rules="required">
                                        <el-input
                                                v-model="person.name"
                                                style="width: 230px;"
                                                placeholder="请输入姓名"
                                                :maxlength="10"
                                                show-word-limit
                                                :clearable="true"
                                                @input="getAbbr"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="姓名拼音：" prop="pinyin" :rules="required">
                                        <el-input
                                                v-model="person.pinyin"
                                                style="width: 230px;"
                                                placeholder="请输入姓名拼音"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="拼音缩写：" prop="abbr" :rules="required">
                                        <el-input
                                                v-model="person.abbr"
                                                style="width: 230px;"
                                                placeholder="请输入拼音缩写"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="部门：" prop="duties">
                                        <el-select v-model="person.deptId" style="width: 230px;" clearable
                                                   class="size-full">
                                            <el-option v-for="(item,index) in departments" :key="index"
                                                       :label="item.name" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="员工工号：" prop="code" :rules="required">
                                        <el-input
                                                v-model="person.code"
                                                placeholder="请输入员工工号"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"
                                                style="width: 230px;"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="员工卡号：" prop="cardNo" :rules="required">
                                        <el-input
                                                v-model="person.cardNo"
                                                style="width: 230px;"
                                                placeholder="请输入员工卡号"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="籍贯：" prop="nativeName">
                                        <el-input
                                                v-model="person.nativeName"
                                                placeholder="请输入员工籍贯"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"
                                                style="width: 230px;"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="职务：" prop="duties">
                                        <el-select v-model="person.dutieId" style="width: 230px;" clearable>
                                            <el-option v-for="(item, index) in dutuies" :key="index" :label="item.name"
                                                       :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="民族：" prop="nation">
                                        <el-select v-model="person.nation" style="width: 230px;" clearable>
                                            <el-option v-for="item in nations" :key="item.value" :label="item.name"
                                                       :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="婚姻：" prop="duties">
                                        <el-select v-model="person.marriage" style="width: 230px;" clearable>
                                            <el-option label="未设置" :value="0"></el-option>
                                            <el-option label="未婚" :value="1"></el-option>
                                            <el-option label="已婚" :value="2"></el-option>
                                            <el-option label="离异" :value="3"></el-option>
                                            <el-option label="丧偶" :value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="性别：" prop="sex">
                                        <el-select v-model="person.gender" style="width: 230px;" placeholder="您的性别">
                                            <el-option v-for="(item, index) in genders" :value="item.value" :key="index"
                                                       :label="item.label">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="学历：" prop="sex">
                                        <el-select v-model="person.education" style="width: 230px;">
                                            <el-option label="未设置" :value="0"></el-option>
                                            <el-option label="小学" :value="1"></el-option>
                                            <el-option label="初中" :value="2"></el-option>
                                            <el-option label="高中" :value="3"></el-option>
                                            <el-option label="大专" :value="4"></el-option>
                                            <el-option label="本科" :value="5"></el-option>
                                            <el-option label="硕士" :value="6"></el-option>
                                            <el-option label="博士" :value="7"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="出生日期：" prop="dateOfBirth">
                                        <el-date-picker
                                                style="width: 230px;"
                                                v-model="person.dateOfBirth"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="请输入出生日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="启用状态：" prop="disabled">

                                        <el-radio-group v-model="person.disabled">
                                            <el-radio :label="0">已启用</el-radio>
                                            <el-radio :label="1">已停用</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>

                        </el-form>

                        <!-- <el-tab-pane label="详细信息" :disabled="editData.add === 1" name="2">-->
                        <el-row id="detail">
                            <el-col :span="6" class="ml20">
                                <h1>详细信息</h1>
                            </el-col>
                        </el-row>

                        <el-form label-width="145px" class="mt30" :model="person" ref="editForm2">

                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="移动电话：" prop="phone">
                                        <el-input
                                                v-model="person.phone"
                                                type="number"
                                                style="width: 230px"
                                                placeholder="请输入移动电话"
                                                :maxlength="11"
                                                show-word-limit
                                                :clearable="true"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="办公电话：" prop="tel">
                                        <el-input
                                                v-model="person.tel"
                                                type="number"
                                                style="width: 230px"
                                                placeholder="请输入办公电话"
                                                :maxlength="11"
                                                show-word-limit
                                                :clearable="true"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="邮      箱：" prop="email">
                                        <el-input
                                                v-model="person.email"
                                                type="text"
                                                style="width: 230px"
                                                placeholder="请输入邮箱"
                                                :maxlength="20"
                                                show-word-limit
                                                :clearable="true"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="工作单位：">
                                        <el-input v-model="person.WorkUnit"
                                                  style="width: 230px"
                                                  placeholder="请输入工作单位"
                                                  :maxlength="15"
                                                  show-word-limit
                                                  :clearable="true">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="通讯地址：">
                                        <el-input v-model="person.address"
                                                  style="width: 230px"
                                                  placeholder="请输入通讯地址"
                                                  :maxlength="25"
                                                  show-word-limit
                                                  :clearable="true">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="工作年限：" prop="dateOfWork">
                                        <el-date-picker
                                                style="width: 230px;"
                                                v-model="person.dateOfWork"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="请输入工作年限">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="身份证号：" prop="idcard" :rules="required1">
                                        <el-input
                                                v-model="person.idCard"
                                                style="width: 230px"
                                                placeholder="请输入身份证号"
                                                :maxlength="18"
                                                show-word-limit
                                                :clearable="true"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="2" :offset="2" style="vertical-align: middle">
                                    <el-form-item label="员工照片：" prop="image1">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove1"
                                            :limit="1"
                                            :file-list="image1"
                                            :show-file-list=true
                                            :on-exceed="handleExceed"
                                            :on-success="image1Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                                <el-col :span="2" :offset="3" style="vertical-align: middle">
                                    <el-form-item label="身份证正面：" prop="image2">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove2"
                                            :limit="1"
                                            :file-list="image2"
                                            :on-exceed="handleExceed"
                                            :on-success="image2Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                                <el-col :span="2" :offset="3" style="vertical-align: middle">
                                    <el-form-item label="身份证反面：" prop="image3">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove3"
                                            :limit="1"
                                            :file-list="image3"
                                            :on-exceed="handleExceed"
                                            :on-success="image3Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                                <!--可以设置hover 对话框显示-->
                                <!-- <el-dialog :visible.sync="dialogVisible">
                                     <img width="100%" :src="dialogImageUrl" alt="">
                                 </el-dialog>-->
                            </el-row>
                            <el-divider></el-divider>
                        </el-form>

                        <!-- <el-tab-pane label="证件信息" :disabled="editData.add === 1" name="3">-->
                        <el-row id="card">
                            <el-col :span="6" class="ml20">
                                <h1>证件信息</h1>
                            </el-col>
                        </el-row>
                        <el-form label-width="145px" class="mt30" :model="person" ref="editForm3"
                                 v-if="person.emplyeeType==2">

                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="驾驶证号：" prop="LicenseNo1">
                                        <el-input
                                                v-model="person.licenseNo1"
                                                style="width: 230px"
                                                placeholder="请输入驾驶证号"
                                                :maxlength="18"
                                                show-word-limit
                                                :clearable="true"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="准驾车型：">
                                        <el-select
                                                v-model="license"
                                                style="width: 230px;"
                                                multiple
                                                collapse-tags
                                                placeholder="准驾车型">
                                            <el-option label="未设置" :value="0x00"></el-option>
                                            <el-option label="A1" :value="0x0001"></el-option>
                                            <el-option label="A2" :value="0x0002"></el-option>
                                            <el-option label="A3" :value="0x0004 "></el-option>
                                            <el-option label="B1" :value="0x0008"></el-option>
                                            <el-option label="B2" :value="0x0010"></el-option>
                                            <el-option label="C1" :value="0x0020"></el-option>
                                            <el-option label="C2" :value="0x0040"></el-option>
                                            <el-option label="C3" :value="0x0080"></el-option>
                                            <el-option label="C4" :value="0x0100"></el-option>
                                            <el-option label="C5" :value="0x0200"></el-option>
                                            <el-option label="D" :value="0x0400"></el-option>
                                            <el-option label="E" :value="0x0800"></el-option>
                                            <el-option label="F" :value="0x1000"></el-option>
                                            <el-option label="M" :value="0x2000"></el-option>
                                            <el-option label="N" :value="0x4000"></el-option>
                                            <el-option label="P" :value="0x8000"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="初次领证日期：" prop="registeredDate1">
                                        <el-date-picker style="width: 230px;"
                                                        v-model="person.registeredDate1"
                                                        format="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        type="datetime"
                                                        placeholder="请输入初次领证日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="有效期至：">
                                        <el-date-picker style="width: 230px;"
                                                        v-model="person.expiryDate1"
                                                        format="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        type="datetime"
                                                        placeholder="请输入证件有效期">
                                        </el-date-picker>
                                    </el-form-item>

                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4" :offset="2" style="vertical-align: middle">
                                    <el-form-item label="驾驶证正面：" prop="image4">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove4"
                                            :limit="1"
                                            :file-list="image4"
                                            :on-exceed="handleExceed"
                                            :on-success="image4Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                                <el-col :span="4" :offset="2" style="vertical-align: middle">
                                    <el-form-item label="驾驶证反面：" prop="image5">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove5"
                                            :limit="1"
                                            :file-list="image5"
                                            :on-exceed="handleExceed"
                                            :on-success="image5Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="6" :offset="2">
                                    <el-form-item label="道路运输资格证号：" prop="licenseNo2">
                                        <el-input
                                                v-model="person.licenseNo2"
                                                style="width: 230px"
                                                placeholder="请输入资格证号"
                                                :maxlength="18"
                                                show-word-limit
                                                :clearable="true"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" :offset="4">
                                    <el-form-item label="初次领证日期：" prop="registeredDate2">
                                        <el-date-picker style="width: 230px;"
                                                        v-model="person.registeredDate2"
                                                        format="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        type="datetime"
                                                        placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>

                                <el-col :span="6" :offset="2">
                                    <el-form-item label="有效期至：" prop="expiryDate2">
                                        <el-date-picker
                                                style="width: 230px;"
                                                v-model="person.expiryDate2"
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                type="datetime"
                                                placeholder="选择日期"
                                        ></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="4" :offset="2" style="vertical-align: middle">
                                    <el-form-item label="运输资格证正面：" prop="image6">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove6"
                                            :limit="1"
                                            :file-list="image6"
                                            :on-exceed="handleExceed"
                                            :on-success="image6Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                                <el-col :span="4" :offset="2" style="vertical-align: middle">
                                    <el-form-item label="运输资格证反面：" prop="image7">
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" :push="0" style="vertical-align: middle">
                                    <el-upload
                                            :action="config.baseURL + '/api/web/file/upload/'"
                                            list-type="picture-card"
                                            :on-remove="handleRemove7"
                                            :limit="1"
                                            :file-list="image7"
                                            :show-file-list=true
                                            :on-exceed="handleExceed"
                                            :on-success="image7Success">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                </el-col>
                            </el-row>
                            <el-row class="mt30">
                                <el-col :offset="2" style="vertical-align: middle">
                                    <el-form-item label="备注：" prop="remarks">
                                        <el-input style="width: 700px" v-model="person.remarks" type="textarea"
                                                  :maxlength="30"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col align="center">
                                <div class="dlblock-mb20 pr10 ml20">
                                    <el-button type="primary" @click="editEmployeeFn('person')">保存</el-button>
                                </div>
                                <div class="dlblock-mb20 ml20 pr10">
                                    <el-button type="danger" @click="resetForm('person')">重置</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-row>

                </el-form>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>

    import {
        delPerson,
        editPerson,
        exportPersonInfo,
        getDepartments,
        getDutuies,
        getEmployees,
        getGroupTree,
        getNativePlaces,
    } from "@/api/"
    import config, {downloadToTagByA} from '@/utils/config'
    import vPinyin from "../../../utils/vue-py";

    export default {
        name: 'Person',
        components: {},
        data() {
            return {
                config,
                /* 导出*/
                //导出对话框
                dialogExportVisible: false,


                //人员导出参数
                exportDeviceVal: {
                    fromPage: 1,
                    toPage: 1,
                    size: 18,
                },

                watch: {
                    'exportDeviceVal.fromPage': function (value) {
                        let reg = /^[+]{0,1}(\d+)$/g;
                        if (!reg.test(value)) {
                            this.exportDeviceVal.fromPage = ''
                        }
                    },
                    'exportDeviceVal.toPage': function (value) {
                        let reg = /^[+]{0,1}(\d+)$/g;
                        if (!reg.test(value)) {
                            this.exportDeviceVal.toPage = ''
                        }
                    }
                },
                employee: false,
                groupTree: [],
                deptList: [

                    {
                        "deptId": 0,
                        "deptName": "全部部门"
                    },
                    {
                        "deptId": 77,
                        "deptName": "销售部"
                    },
                    {
                        "deptId": 78,
                        "deptName": "财务部"
                    },
                    {
                        "deptId": 70,
                        "deptName": "研发部"
                    },
                ],
                dutytList: [

                    {
                        "dutieId": 0,
                        "dutieName": "全部职务"
                    },
                    {
                        "dutieId": 3,
                        "dutieName": "驾驶员"
                    },
                    {
                        "dutieId": 4,
                        "dutieName": "调度员"
                    },
                    {
                        "dutieId": 5,
                        "dutieName": "安全员"
                    },
                ],
                param: {
                    groupId: '',
                    deptId: '',
                    dutieId: '',
                    name: '',
                },
                line: '',
                name: '',
                loading: '',
                personList: [],
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                query: {
                    groupId: '',
                    deptId: '',
                    dutieId: '',
                    name: '',
                    total: 0,
                    pageSize: 18,
                    pageNum: 1
                },
                nativePlaces: [],
                departments: [],
                dutuies: [],
                person: {},
                personIds: [],
                checkVal: [],
                genders: [
                    {
                        label: "男",
                        value: 1,
                    },
                    {
                        label: "女",
                        value: 2,
                    },
                    {
                        label: "未知",
                        value: 0,
                    },
                ],
                nations: ["未设置", "汉族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", "布依族", "朝鲜族", "满族", "侗族", "瑶族", "白族",
                    "土家族", "哈尼族", "哈萨克族", "傣族", "黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", "景颇族", "柯尔克孜族", "土族",
                    "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", "毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族", "俄罗斯族", "鄂温克族",
                    "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", "鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"],
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
                required1: [
                    {required: true, message: '请输入手机号', trigger: "blur"},
                    {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的手机号!', trigger: "blur"}
                ],
                active: "1",
                image1: [],
                image2: [],
                image3: [],
                image4: [],
                image5: [],
                image6: [],
                image7: [],
                license: [],
            }
        },


        methods: {
            //导出人员模板
            downloadBtn() {
                downloadToTagByA("/api/web/employee/export/template", {
                    time: this.date,
                })
            },
            handlePreview(file) {
                console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },



            dataYear(row, column) {
                const daterc = row[column.property];
                if (daterc != null) {
                    var time = daterc;
                    const timeFormat = time.slice(0, 10);
                    return timeFormat;
                }
            },
            dateHour(row, column) {
                const daterc = row[column.property];
                if (daterc != null) {
                    var time = daterc;
                    const timeFormat = time.slice(11, 19);
                    return timeFormat;
                }
            },
            checkMethod(event, index) {
                let e = event.target
                if (e.parentElement.classList.contains("is-checked")) {
                    e.parentElement.classList.remove("is-checked")
                    this.personIds.splice(index - 1, 1)
                    alert(this.personIds)
                } else {
                    e.parentElement.classList.add("is-checked")
                    this.personIds[index - 1] = this.personList[index - 1].id
                    alert(this.personIds)
                }
                let checkeds = document.querySelectorAll(".mydeal");
                let b = 0
                checkeds.forEach(item => {
                    if (item.classList.contains("is-checked")) {
                        b = b + 1;
                    }
                })
                let els = document.querySelectorAll(".el-table-column--selection");
                if (b == this.personList.length || b - 8 == this.personList.length) { //全选
                    this.checkSwitch(els[5].querySelector(".el-checkbox__inner"))
                } else if (b < this.personList.length || b - 8 < this.personList.length) {
                    this.checkRemove(els[5].querySelector(".el-checkbox__inner"))
                }
            },
            getUrl(image1) {
                if (image1 != '' && image1 != null) {
                    return window.gConfig.baseURL + image1
                } else {
                    return require('../../../assets/imgs/user_default.png')
                }

            },
            handleSelectionChange(val) {
                this.personIds = []
                val.forEach(x => {
                    console.log(x)
                    this.personIds.push(x.empId)
                });
            },

            pageChange(val) {
                this.query.pageNum = val;
                this.getEmployeesFn()
            },

            getLicense(license) {
                if (license != null) {
                    switch (license) {
                        case 1:
                            return "A1 驾照";
                        case 2:
                            return "A2 驾照";
                        case 4:
                            return "A3 驾照";
                        case 8:
                            return "B1 驾照";
                        case 10:
                            return "B2 驾照";
                        case 20:
                            return "C1 驾照";
                        default:
                            return "未知 驾照"
                    }
                }
                return "未收录"
            },

            //站点拼音缩写
            getAbbr() {
                this.person.pinyin = vPinyin.chineseToPinYin(this.person.name)
                let SX = '';
                for (var i = 0; i < this.person.pinyin.length; i++) {
                    var c = this.person.pinyin.charAt(i);
                    if (/^[A-Z]+$/.test(c)) {
                        SX += c;
                    }
                }
                this.person.abbr = SX;
            },

            //数组并运算
            sum(arr) {
                var s = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    s = s | arr[i];
                }
                return s;
            },

            addEmployeeFn() {
                this.employee = true
            },
            updateEmployeeFn(row) {
                this.employee = true
                console.log(row)
                this.person = row
            },
            editEmployeeFn(formName) {
                console.log(this.person)
                this.person.native1 = this.person.native
                this.person.license = this.sum(this.license)
                console.log(this.person)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.person.groupId.hasOwnProperty('length')) {
                            if (this.person.groupId.length != 0) {
                                this.person.groupId = this.person.groupId[this.person.groupId.length - 1]
                            }
                        }
                        console.log(this.person)
                        editPerson(this.person).then(res => {
                            if (res.code == 200) {
                                this.$message.success("保存成功")
                                this.employee = false
                                this.getEmployeesFn();
                            }
                        }).catch(err => {
                            this.$message.error("保存失败")
                        })
                    } else {
                        return false;
                    }
                });
            },
            delPersonFn(row) {
                this.$confirm('此操作将永久删除人员信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.personIds = []
                    this.personIds.push(row.empId)
                    console.log(this.personIds)
                    delPerson({personIds: this.personIds}).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.getEmployeesFn()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },
            delPersonsFn() {
                if (this.personIds.length != 0) {
                    this.$confirm('此操作将永久删除人员信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(this.personIds)
                        delPerson({
                            personIds : this.personIds
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.getEmployeesFn()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择人员'});
                }
            },
            getEmployeesFn() {
                console.log(this.param)
                getEmployees({
                    groupId: this.param.groupId[0],
                    deptId: this.param.deptId,
                    dutieId: this.param.dutieId,
                    name: this.param.name,
                    total: this.query.total,
                    pageSize: this.query.pageSize,
                    pageNum: this.query.pageNum
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.personList = res.data.list
                        this.query.total = res.data.count
                    }
                    console.log(res.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            getDutuiesFn() {
                getDutuies().then(res => {
                    if (res != null && res.code == 200) {
                        this.dutuies = res.data;
                    }
                })

            },
            getDepartmentsFn() {
                getDepartments().then(res => {
                    if (res != null && res.code == 200) {
                        this.departments = res.data;
                    }
                })
            },
            getNativePlacesFn() {
                getNativePlaces().then(res => {
                    if (res != null && res.code == 200) {
                        this.nativePlaces = res.data;
                    }
                })

            },

            downloadEmpFn() {
                //this.departureSchedule=true;
                downloadToTagByA("/api/web/employee/export/emp", {
                    token: localStorage.token,
                    groupId: this.param.groupId[0],
                    deptId: this.param.deptId,
                    dutieId: this.param.dutieId,
                    name: this.param.name,
                })
            },
            indexMethod(index) {
                return index + (this.param.page - 1) * 4 + 1;
            },
            checkSwitch(e) {
                if (e.parentElement.classList.contains("is-checked")) {
                    e.parentElement.classList.remove("is-checked")
                } else {
                    e.parentElement.classList.add("is-checked")
                }
            },
            checkAdd(e) {
                e.parentElement.classList.add("is-checked")
            },
            checkRemove(e) {
                e.parentElement.classList.remove("is-checked")
            },

            //获取机构
            getGroupTreeFn() {
                getGroupTree({}).then(res => {
                    if (res.code == 200) {
                        this.groupTree = res.data.children
                    }
                })
            },


            // 初始化数据
            init() {
                this.person = {}
                this.image1 = []
                this.image2 = []
                this.image3 = []
                this.image4 = []
                this.image5 = []
                this.image6 = []
                this.image7 = []
            },

            //移除照片
            handleRemove1(file, image1) {
                this.person.image1 = ''

            },

            //移除照片
            handleRemove2(file, image2) {
                this.person.image2 = ''

            },

            //移除照片
            handleRemove3(file, image3) {
                this.person.image3 = ''

            },

            //移除照片
            handleRemove4(file, image4) {
                this.person.image4 = ''

            },

            //移除照片
            handleRemove5(file, image5) {
                this.person.image5 = ''

            },

            //移除照片
            handleRemove6(file, image6) {
                this.person.image6 = ''

            },

            //移除照片
            handleRemove7(file, image7) {
                this.person.image7 = ''

            },

            image1Success(res) {
                if (res != null && res.code == 200) {
                    console.log(res);
                    this.person.image1 = res.data
                }
            },
            image2Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image2 = res.data
                }
            },
            image3Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image3 = res.data
                }
            },
            image4Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image4 = res.data
                }
            },
            image5Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image5 = res.data
                }
            },
            image6Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image6 = res.data
                }
            },
            image7Success(res) {
                if (res != null && res.code == 200) {
                    this.person.image7 = res.data
                    console.log(this.person.image7)
                }
            },

            handleExceed() {
                this.$message.warning("最多可上传1张图片");
            },
        },
        created() {
            this.getDutuiesFn()
            this.getDepartmentsFn()
            this.getNativePlacesFn()
            this.getEmployeesFn()
            this.getGroupTreeFn();
            let nationsArray = []
            for (let i = 0; i < this.nations.length; i++) {
                nationsArray.push({name: this.nations[i], value: i})
            }
            this.nations = nationsArray
        },
        mounted() {
            if (this.$route.query.person != null) {
                this.person = this.$route.query.person
                //照片回显
                if (this.person.image1 != '' && this.person.image1 != null) {
                    this.image1.push({'url': window.gConfig.uploadURL + this.person.image1})
                }
                if (this.person.image2 != '' && this.person.image2 != null) {
                    this.image2.push({'url': window.gConfig.uploadURL + this.person.image2})
                }
                if (this.person.image3 != '' && this.person.image3 != null) {
                    this.image3.push({'url': window.gConfig.uploadURL + this.person.image3})
                }
                if (this.person.image4 != '' && this.person.image4 != null) {
                    this.image4.push({'url': window.gConfig.uploadURL + this.person.image4})
                }
                if (this.person.image5 != '' && this.person.image5 != null) {
                    this.image5.push({'url': window.gConfig.uploadURL + this.person.image5})
                }
                if (this.person.image6 != '' && this.person.image6 != null) {
                    this.image6.push({'url': window.gConfig.uploadURL + this.person.image6})
                }
                if (this.person.image7 != '' && this.person.image7 != null) {
                    this.image7.push({'url': window.gConfig.uploadURL + this.person.image7})
                }

                //驾照类型
                if ((this.person.license & 0x00) != 0) {
                    this.license.push(0x00)
                }
                if ((this.person.license & 0x0001) != 0) {
                    this.license.push(0x0001)
                }
                if ((this.person.license & 0x0002) != 0) {
                    this.license.push(0x0002)
                }
                if ((this.person.license & 0x0004) != 0) {
                    this.license.push(0x0004)
                }
                if ((this.person.license & 0x0008) != 0) {
                    this.license.push(0x0008)
                }
                if ((this.person.license & 0x0010) != 0) {
                    this.license.push(0x0010)
                }
                if ((this.person.license & 0x0020) != 0) {
                    this.license.push(0x0020)
                }
                if ((this.person.license & 0x0040) != 0) {
                    this.license.push(0x0040)
                }
                if ((this.person.license & 0x0080) != 0) {
                    this.license.push(0x0080)
                }
                if ((this.person.license & 0x0100) != 0) {
                    this.license.push(0x0100)
                }
                if ((this.person.license & 0x0200) != 0) {
                    this.license.push(0x0200)
                }
                if ((this.person.license & 0x0400) != 0) {
                    this.license.push(0x0400)
                }
                if ((this.person.license & 0x0800) != 0) {
                    this.license.push(0x0800)
                }
                if ((this.person.license & 0x1000) != 0) {
                    this.license.push(0x1000)
                }
                if ((this.person.license & 0x2000) != 0) {
                    this.license.push(0x2000)
                }
                if ((this.person.license & 0x4000) != 0) {
                    this.license.push(0x4000)
                }
                if ((this.person.license & 0x8000) != 0) {
                    this.license.push(0x8000)
                }
            }
            this.getGroupTreeFn()

            // 事件监听滚动条
            window.addEventListener('scroll', this.watchScroll)
        }
    }
</script>

<style scoped>
    /*内容左对齐*/
    /*.el-table__body-wrapper {
        text-align-last: left;
    }*/
    /*.input-text > input {*/
    /*    text-align: center;*/
    /*}*/
    span.checkbox {
        position: relative;
        left: 5px;
        top: -1px;
    }

    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }
</style>
